<!DOCTYPE html>
<html>
	<head>

		<title>CSS基础</title>
		<style>
			body{
				/* margin:0px; */
			}
			td{
				color:red;
				background-color:dodgerblue;
				font-size: 24px;
				border:1px solid blue;
				height: 50px;
				width: 25%;
				text-align: center;
				transition:all 0.5s;
			}	
			td:hover{
				background-color: orange;
				cursor: pointer;
				font-size: 30px;
				color: white;
				
			}
			#red{
				color:red;
				font-size: 40px;
			}
			#blue{
				color:blue;
				font-size: 40px;
			}
			#green{
				font-size: 40px;
				color:green;
			}
			#td-gray{
				background-color: gray;
				border-radius:20px 20px 0px 0px;
				text-align: left;
			}
			#td-white{
				background-color: white;
				text-align: left;
			}
			table{
				border-radius: 20px;
				border-spacing:0px;
				width:300px;
				height: 350px;
				margin: 0 auto;
			}
			
			a:link{
				color:black;
				text-decoration: none;
			}
			a:visited{
				color:red;
			}
			a:active{
				color:yellow;
			}
			a:hover{
				color:gray;
				text-decoration: underline;
			}
			.td-gray{
				background-color: gray;
			}
			.td-orange{
				background-color: orange;
		</style>


	</head>
	
	<body>
	<table >
			<tr>
				<td colspan="4" id="td-gray">
					<span id="red">●</span><span id="blue">●</span><span id="green">●</span>		
				</td>
				
			</tr>
			<tr>
				<td colspan="4" id="td-white"><a href="http://www.163.com">aaa</a></td>
				
			</tr>
			<tr>
				<td  class="td-gray">AC</td>
				<td  class="td-gray">+/-</td>
				<td  class="td-gray">%</td>
				<td  class="td-orange" >/</td>
			</tr>
			<tr >
				<td>7</td>
				<td>8</td>
				<td>9</td>
				<td class="td-orange">*</td>
			</tr>
			<tr >
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td class="td-orange">-</td>
			</tr>
			<tr >
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td class="td-orange">+</td>
			</tr>
			<tr >
				<td style="border-radius: 0px 0px 0px 20px;">0</td>
				<td>删除</td>
				<td>.</td>
				<td style="border-radius: 0px 0px 20px 0px;" class="td-orange">=</td>
			</tr>
		</table>
	</body>
</html>
